<script setup lang="ts">
import TopNavLayout from '@/layouts/TopNavLayout.vue'
import CollapsibleList from '@/components/CollapsibleList.vue'
import StickyLineList from '@/components/StickyLineList.vue'
import SearchBox from '@/components/SearchBox.vue'
import AppItem from '@/views/LLMStudio/components/AppItem.vue'
import CreateAgentWorkflowModal from '@/views/LLMStudio/components/CreateAgentWorkflowModal.vue'
import FlexibleCard from '@/components/flexible-card.vue'

import { Tool } from '@vicons/tabler'
import {
  Robot,
  Book,
  Apps,
  ChevronLeft,
  ChevronRight,
  LayoutGrid,
  BoxMultiple,
  ClipboardPlus,
  ClipboardList
} from '@vicons/tabler'
import { ref } from 'vue'
import router from '@/router'
const navItems = ref([
  { key: 'all', label: '全部', icon: LayoutGrid },
  { key: 'agent', label: 'Agent', icon: Robot },
  { key: 'flow', label: '工作流', icon: BoxMultiple }
])
const navActiveKey = ref('all')
const menuItems = [
  {
    type: 'menu',
    label: '应用市场',
    key: 'appStore',
    icon: Apps
  },
  {
    type: 'group',
    label: '其他',
    key: 'find'
  },
  {
    type: 'menu',
    label: 'LLM Agent',
    key: 'apps',
    icon: Robot
  },
  {
    type: 'menu',
    label: 'Tools',
    key: 'tools',
    icon: Tool
  },
  {
    // 知识库
    type: 'menu',
    label: '知识库',
    key: 'datasets',
    icon: Book
  },
  {
    type: 'menu',
    label: '收起',
    key: 'collapse',
    icon: ChevronLeft
  }
]
const isCollapsed = ref(false)
const menuActiveKey = ref('llm-agent')
const handleItemClick = (item: any) => {
  const key = item.key
  if (key === 'collapse') {
    isCollapsed.value = !isCollapsed.value
    if (isCollapsed.value) {
      menuItems[menuItems.length - 1].icon = ChevronRight
      menuItems[menuItems.length - 1].label = '展开'
    } else {
      menuItems[menuItems.length - 1].icon = ChevronLeft
      menuItems[menuItems.length - 1].label = '收起'
    }
  } else {
    menuActiveKey.value = key
    router.push({ name: key })
  }
}
const modalRef = ref(null)

const openModal = () => {
  modalRef.value.openModal()
}
</script>

<template>
  <TopNavLayout class="bg-gray-100">
    <div class="flex h-full w-full">
      <!-- 右边侧边栏1px的边框 -->
      <div class="sidebar-container">
        <CollapsibleList
          activeClass="bg-white color-#155aef dark:bg-dark hover:bg-#eaf0f1 dark:hover:bg-#1b2429 shadow-md"
          hoverClass="hover:bg-#e8e9e9 hover:dark:bg-#1b2429"
          :isCollapsed="isCollapsed"
          :modelValue="menuActiveKey"
          :menuItems="menuItems"
          @itemClick="handleItemClick"
        ></CollapsibleList>
      </div>
      <div class="content-container flex flex-col px-10 py-5 w-full h-full">
        <!-- 分类和搜索 -->
        <div class="flex items-center justify-between w-full h-10">
          <StickyLineList :navItems="navItems" v-model:value="navActiveKey"> </StickyLineList>
          <!-- 搜索 -->
          <SearchBox></SearchBox>
        </div>
        <div class="apps-body">
          <!-- 响应式布局，根据屏幕宽度自动切换4到1个item -->
          <n-scrollbar style="height: 100%">
            <n-grid cols="4" item-responsive responsive="screen" x-gap="15px" y-gap="15px">
              <n-grid-item span="4 m:2 l:1">
                <FlexibleCard style="background-color: rgba(0, 0, 0, 0.05)">
                  <template #card>
                    <label class="text-lg text-gray-500 mb-10px pl-15px">创建应用</label>
                    <div
                      class="flex items-center hover:bg-white px-15px py-5px rounded-lg cursor-pointer"
                      @click="openModal"
                    >
                      <n-icon size="20" class="text-gray-500 mr-10px"><ClipboardPlus /></n-icon>
                      创建空白应用
                    </div>
                    <div
                      class="flex items-center hover:bg-white px-15px py-5px rounded-lg cursor-pointer"
                    >
                      <n-icon size="20" class="text-gray-500 mr-10px"><ClipboardList /></n-icon>
                      从应用模版创建
                    </div>
                  </template>
                </FlexibleCard>
              </n-grid-item>
              <n-grid-item span="4 m:2 l:1" v-for="item in 50" :key="item">
                <app-item
                  avatarSrc="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                  name="超级Python开发人员"
                  :tags="[
                    { label: '已认证', type: 'success' },
                    { label: 'ChatGPT-4o', type: 'default' }
                  ]"
                  description="阿达湿哒哒送到家我的泡脚哦端午节大当家阿达湿哒阿达湿哒哒送到家我的泡脚哦端午节大当家阿达湿哒阿达湿哒哒送到家我的泡脚哦端午节大当家阿达湿哒阿达湿哒哒送到家我的泡脚哦端午节大当家阿达湿哒阿达湿哒哒送到家我的泡脚哦端午节大当家阿达湿哒阿达湿哒哒送到家我的泡脚哦端午节大当家阿达湿哒阿达湿哒哒送到家我的泡脚哦端午节大当家阿达湿哒阿达湿哒哒送到家我的泡脚哦端午节大当家阿达湿哒阿达湿哒哒送到家我的泡脚哦端午节大当家阿达湿哒阿达湿哒哒送到家我的泡脚哦端午节大当家阿达湿哒"
                ></app-item>
              </n-grid-item>
            </n-grid>
          </n-scrollbar>
        </div>
      </div>
    </div>
  </TopNavLayout>
  <CreateAgentWorkflowModal ref="modalRef"></CreateAgentWorkflowModal>
</template>

<style scoped lang="scss">
.apps-body {
  height: calc(100% - 50px);
  width: 100%;
  margin-top: 15px;
  overflow: hidden;
}
.sidebar-container {
  padding: 15px 5px 0px 5px;
  height: 100%;
  border-right: 1px solid rgba(128, 128, 128, 0.1);
  flex: 0 0;
}
</style>
